<template>
	<view class="grace-padding">

		<view style="margin-top:50px;" class="grace-center">
			<image :src='userData.avatarUrl' style='width:68px; height:68px; border-radius:8px;'></image>
			<view>{{userData.nickName}}</view>
		</view>

		<scroll-view class="grace-tab-title grace-center" scroll-x="true" id="grace-tab-title">
			<view v-for="(cate, index) in categories" :key="index" :data-cateid="cate.cateid" :data-index="index" :class="[cateCurrentIndex == index ? 'grace-tab-current' : '']"
			 @tap="tabChange">{{cate.name}}</view>
		</scroll-view>

		<block v-if="cateCurrentIndex==0">

			<view class="grace-form" style="margin-top:50upx;">
				<form @submit="registNow">
					<view class="grace-items grace-items-wbg item-border">
						<view class="grace-label">
							<picker :value="pnpre" @change="changePre" :range="pnpres" name="pn_pre">
								<text>+{{pnpre}}</text>
							</picker>
						</view>
						<input type="number" name="name" class="input" placeholder="请输入手机号"></input>
					</view>
					<view class="grace-space-between" style="margin-top:28upx;">
						<view class="grace-items grace-items-wbg item-border" style="width:100%;">
							<view class="grace-label grace-center">密码：</view>
							<input class="input" name="password" :password="showPassword" placeholder="请输入密码"></input>
							<view style="margin:8px 5px;" class="uni-icon uni-icon-eye" :class="[!showPassword ? 'uni-active' : '']" @click="changePassword"></view>
						</view>
					</view>
					<view class="grace-space-between" style="margin-top:28upx;">
						<view class="grace-items grace-items-wbg" style="width:66%;">
							<view class="grace-label grace-center">验证码：</view>
							<input class="input" name="code" placeholder="输入0000"></input>
						</view>
						<view style="width:32%;  margin-left:2%; paading:0;">
							<button type="primary" class="thisBtn" style='background:#00C777;'>获取验证码</button>
						</view>
					</view>
					<button form-type='submit' type='primary' style='background:#00C777; margin-top:20px;'>
						快速绑定
					</button>
				</form>
			</view>

		</block>

		<block v-if="cateCurrentIndex==1">

			<view class="grace-form" style="margin-top:50upx;">
				<form @submit="loginNow">
					<view class="grace-items grace-items-wbg item-border">
						<view class="grace-label">
							<picker :value="pnpre" @change="changePre" :range="pnpres" name="pn_pre">
								<text>+{{pnpre}}</text>
							</picker>
						</view>
						<input name="name" class="input" placeholder="请输入用户名/手机号"></input>
					</view>
					<view class="grace-space-between" style="margin-top:28upx;">
						<view class="grace-items grace-items-wbg item-border" style="width:100%;">
							<view class="grace-label grace-center">密码：</view>
							<input class="input" name="password" :password="showPasswords" placeholder="请输入密码"></input>
							<view style="margin:8px 5px;" class="uni-icon uni-icon-eye" :class="[!showPasswords ? 'uni-active' : '']" @click="changePasswords"></view>

						</view>
					</view>
					<button form-type='submit' type='primary' style='background:#00C777; margin-top:20px;'>
						快速绑定
					</button>
				</form>
			</view>

		</block>



	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';	
	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
		},		
		data() {
			return {
				pnpre: '86',
				pnpres: ['86', '01', '11', '26', '520'],
				showPassword: true,
				showPasswords: true,
				url: '',
				providerList: [],
				positionTop: 0,
				categories: [{
						cateid: 0,
						name: "新用户注册"
					},
					{
						cateid: 1,
						name: "已有用户"
					}
				],
				// 当前选择的分类
				cateCurrentIndex: 0,
				openid: "",
				provider: "",
				userData: {}
			}
		},
		onLoad(e) {
			this.url = e.url;
			this.provider = e.provider;
			this.openid = e.openid;
			let obj = JSON.parse(decodeURIComponent(e.userInfo));
			this.userData = obj;
		},
		methods: {
			...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),			
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			changePasswords: function() {
				this.showPasswords = !this.showPasswords;
			},			
			registNow: function(e) {
				//console.log(e);
				if (e.detail.value.name.length < 1) {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
					return;
				}
				var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (!reg.test(e.detail.value.name)) {
					uni.showToast({
						title: "手机号格式不正确",
						icon: "none"
					})
					return;
				}
				if (e.detail.value.password.length < 6 || e.detail.value.password.length > 20) {
					uni.showToast({
						title: "密码长度请设置为6-20位",
						icon: "none"
					})
					return;
				}
				// 				if(e.detail.value.code.length < 1){
				// 					uni.showToast({
				// 						title:"请输入验证码",
				// 						icon:"none"
				// 					})
				// 					return;
				// 				}					
				uni.request({
					url: this.serverUrl + 'user-api/register',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: 'POST',
					data: {
						username: e.detail.value.name,
						password: e.detail.value.password,
						code: e.detail.value.code,
					},
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							if (r.data.data.id != null) {
								this.uploadFile(r.data.data.username);
							} else {
								uni.showToast({
									title: '验证码不正确',
									icon: 'none'
								})
							}
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (err) => {
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						})
					}
				})
			},
			loginNow: function(e) {
				//console.log(e);
				if (e.detail.value.name.length < 1) {
					uni.showToast({
						title: "请输入用户名或手机号",
						icon: "none"
					})
					return;
				}
				if (e.detail.value.password.length < 6 || e.detail.value.password.length > 20) {
					uni.showToast({
						title: "密码长度请设置为6-20位",
						icon: "none"
					})
					return;
				}
				uni.request({
					url: this.serverUrl + 'user-api/login',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: 'POST',
					data: {
						username: e.detail.value.name,
						password: e.detail.value.password,
					},
					success: (r) => {
						//console.log(r);
						if (r.statusCode == '200') {
							if (r.data.length != 0) {
								this.uploadFile(r.data.data.username);
							} else {
								uni.showToast({
									title: '密码不正确',
									icon: 'none'
								})
							}
						} else {
							uni.showToast({
								title: r.errMsg
							});
						}
					},
					fail: (err) => {
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						})
					}
				})
			},
			uploadFile(username) {
				uni.downloadFile({
					url: this.userData.avatarUrl, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							uni.uploadFile({
								url: this.serverUrl + 'user-api/uploadFile',
								header: {
									"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
								},
								filePath: res.tempFilePath,
								name: 'file',
								method: "POST",
								formData: {
									username: "",
								},
								success: (r) => {
									var rdata = JSON.parse(r.data);
									var data = {
										"username": username,
									}
									if (this.cateCurrentIndex == 0) {
										data.nickName = this.userData.nickName;
										data.avatarImg = rdata.data.result;
										data.gender = this.userData.gender == 0 ? 0 : (this.userData.gender == 1 ? 2 : 1);
									}
									var tm = "";
									if (this.provider == "weixin") {
										tm = "connectWeixin";
									} else if (this.provider == "qq") {
										tm = "connectQq";
									} else if (this.provider == "sinaweibo") {
										tm = "connectSina";
									}
									// #ifdef MP-WEIXIN
										tm = "connectSmartprogram";
									// #endif									
									data[tm] = this.openid;
									this.saveUser(data);
								},
								fail: (r) => {
									uni.showToast({
										title: "上传失败",
									})
								}
							});
						}
					}
				});

			},
			saveUser(data) {
				uni.request({
					url: this.serverUrl + 'user-api/editUser',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: 'POST',
					data: data,
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							this.login(r.data.data);
							var date = new Date();
							uni.setStorageSync('appKey', r.data.data.username + '&' + date.getTime());
							if (this.url != "") {
								uni.redirectTo({
									url: this.url
								})
							} else {
								uni.switchTab({
									url: "/pages/tab-bar/my/my",
								})
							}
						} else {
							uni.showToast({
								title: r.errMsg
							});
						}
					},
					fail: (err) => {
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						})
					}
				})
			},
			tabChange: function(e) {
				// 选中的索引
				var index = e.currentTarget.dataset.index;
				// 具体的分类id
				var cateid = e.currentTarget.dataset.cateid;
				this.cateCurrentIndex = index;



			}
		}
	}
</script>

<style>
	page {
		width: 750upx;
		min-height: 100%;
	}

	.thisBtn {
		background: #5D6AB4;
		color: #FFFFFF;
		font-size: 14px;
		width: 100%;
		height: 88upx;
		line-height: 88upx;
	}

	.item-border {
		border-bottom: 1px solid #E0E0E0 !important;
	}

	.login-sendmsg-btn {
		border: 1px solid #00C777 !important;
		background: none !important;
		color: #00C777 !important;
		width: 100%;
		height: 35px;
		line-height: 35px;
		margin-top: 6px;
		font-size: 14px !important;
	}

	.grace-login-three {
		display: flex;
		justify-content: center;
		flex-wrap: nowrap;
	}

	.grace-login-three view {
		width: 50px;
		height: 50px;
		line-height: 50px;
		font-size: 46px;
		color: #00C777;
		text-align: center;
		margin: 8px 15px;
	}

	.grace-form picker {
		text-align: left;
	}

	.grace-form .grace-items .input {
		padding: 10upx 2%;
		margin-left: 15upx;
	}
</style>
